<template>
	<el-card class="main2">
		<div slot="header">
			<span>成绩管理/班级成绩管理</span>
		</div>
		<p>
			<el-select v-model="banjiId" :size="size" placeholder="请选择班级" style="margin-right: 1.25rem;" clearable>
				<el-option v-for="(item,idx) in bjs" :key="idx" :value="item.id" :label="item.name"></el-option>
			</el-select>
			<el-select v-model="courseId" :size="size" placeholder="请选择课程" clearable>
				<el-option v-for="item in kcs" :key="item.id" :value="item.id" :label="item.name"></el-option>
			</el-select>
		</p>
		<el-table v-if="tableVisiable" border :data="data" size="small" highlight-current-row>
			<el-table-column v-for="(col,index) in cols" :key="index" :prop="col.prop" :label="col.label"></el-table-column>
			<el-table-column label="成绩" width="150">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.grade" @change="onGreadeChange(scope.row)"></el-input>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				banjiId: '',
				courseId:'',
				bjs:[],
				kcs:[],
				size:'small',
				data:[],
				cols:[
					{label:'学号',prop:'student.stuNo'},
					{label:'姓名',prop:'student.name'}
				]
			}
		},
		computed:{
			tableVisiable(){
				if(this.banjiId&&this.courseId){
					this.getData();
					return true;
				}
				return false;
			},
		},
		methods:{
			getData(){
				this.$ajax.post('grade/findGradeListByCourseIdAndBanjiId',{courseId:this.courseId,banjiId:this.banjiId}).then(res=>{
					var result=res.data;
					this.data=result;
				})
			},
			onGreadeChange(row){
				if(Number.isInteger(Number(row.grade))){
					var param={id:row.id,courseId:row.course.id,studentId:row.student.id,grade:row.grade};
					this.$ajax.post('grade/save',param).then(res=>{
						var result=res.data;
						if(result.success){
							this.$notify.success({
								message:'数据保存成功',
								position:'bottom-right'
							})
						}
					})
				}else{
					this.$message.error('成绩必须为正整数');
					row.grade=''
				}
			}
		},
		
		mounted() {
			this.$ajax.post('banji/list',{}).then(res=>{
				var result=res.data;
				this.bjs=result;
			});
			this.$ajax.post('course/list',{}).then(res=>{
				var result=res.data;
				this.kcs=result;
			})
		}
	}
</script>

<style>
</style>
